<template>
    <div class="sync-mockups-preview">
        <figure class="sync-mockups-size" v-if="mockup.type == 'size'"><img :src="sizeUrl" alt=""></figure>
        <CommonTemplatePreview v-else :baseModel="baseModel" :baseColor="baseColor" :size="size" />
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    name: "SynchronizeMockupsPreview",
    props: {
        mockup: { type: Object, default: () => (null) },
        size: { type: String, default: '' },
    },
    data () {
        return {
        };
    },
    computed: {
        ...mapState("synchronize", {
            clothes: "clothes",
            mockups: "mockups",
        }),

        // 模特图
        baseModel () {
            const product = this.clothes.find(i => i.design_id == this.mockup.design_id)
            const model = product ? product.model_list.find(i => i.id == this.mockup.model_id) : null;
            return model
        },

        // 颜色
        baseColor () {
            const product = this.clothes.find(i => i.design_id == this.mockup.design_id)
            const color = product ? product.color_list.find(i => i.color_id == this.mockup.color_id) : null
            return color;
        },

        // 尺码
        sizeUrl () {
            const product = this.clothes.find(i => i.design_id == this.mockup.design_id)
            const size = product ? this.$getImageUrl(product.size_url, this.size) : ''
            return size;
        }
    },
};
</script>
<style lang="scss" scoped>
.sync-mockups-preview {
    position: relative;
    box-sizing: border-box;
    // border: 1px solid #ebebeb;
    // border-radius: 4px;
    overflow: hidden;

    &::before {
        content: '';
        display: block;
        padding-bottom: 100%;
    }

    & > .template-preview {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .sync-mockups-size {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-items: center;
        align-items: center;
        box-sizing: border-box;
        padding: 4px;

        & > img {
            width: 100%;
            vertical-align: top;
        }
    }
}
</style>
